<!doctype html>
<html>
  <head>
    <title>Simple Chatbot</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <p>Step 1: Initialize WebLLM and Download Model</p>
    <div class="download-container">
      <select id="model-selection"></select>
      <button id="download">Download</button>
    </div>
    <p id="download-status" class="hidden"></p>

    <p>Step 2: Chat</p>
    <div class="chat-container">
      <div id="chat-box" class="chat-box"></div>
      <div id="chat-stats" class="chat-stats hidden"></div>
      <div class="chat-input-container">
        <input type="text" id="user-input" placeholder="Type a message..." />
        <button id="send" disabled>Send</button>
      </div>
    </div>

    <script src="./index.js" type="module"></script>
  </body>
</html>
